<template>
  <div>
    <cus-modal ref="modal" title="为食谱原料绑定主副食商品名称" @on-visible-change="onVisibleChange" :width="step == 1 ? '750' : '1350'"
      @onOk="onOk" okBtnName="开始/重新匹配" cancelBtnName="关闭">
      <Spin fix v-if="loading"></Spin>
      <div class="contentBox">
        <div class="contentBox-left">
          <div style="width: 687px">
            <Form ref="formValidate" style="justify-content: start" :model="form">
              <FormItem label="原料:" prop="mealMaterialName" style="margin-right: 20px" :label-width="60">
                <Input v-model="form.mealMaterialName" maxlength="20" clearable placeholder="请输入食谱原料名"
                  style="width: 200px">
                </Input>
              </FormItem>
              <FormItem class="location" label="" prop="kitchenArea" 
              >
                <Select v-model="form.kitchenArea" style="width: 100px;" placeholder="请选择区域" @on-change="changekitchenArea">
                  <Option :value="item.kitchenArea" v-for="(item, index) in areaList" :key="index">
                    {{ item.kitchenAreaName }}
                  </Option>
                </select>
              </FormItem>
              <FormItem label="类型:" prop="type" :label-width="60" style="margin-right: 20px">
                <Select v-model="form.type" style="width: 200px" placeholder="请选择类型" clearable>
                  <Option :value="0">全部</Option>
                  <Option :value="1">已匹配</Option>
                  <Option :value="2">未匹配</Option>
                </Select>
              </FormItem>
              <Button class="ml_24" type="primary" @click="
                pages.page = 1;
              selectMealFoodOrPurchaseFoodMatchingApi();
              ">查询</Button>
            </Form>
          </div>
          <div  style="width: 687px">
            <Table border :loading="loading" :columns="columns" :data="data" height="500">
              <template slot-scope="{ row }" slot="materialName">
                <div class="namebox" @click="selectLeftBtn(row)" :class="selectItem && selectItem.materialId == row.materialId
                    ? 'selecteft'
                    : ''
                  ">
                  {{ row.materialName }}
                </div>
              </template>
              <template slot-scope="{ row }" slot="productName">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div class="slotBox-item" v-for="(item, idx) in row.foodProductMatchingList" :key="idx" :class="{
                    noBorderB: idx + 1 == row.foodProductMatchingList.length,
                  }">
                    {{ item.productMaterialName }}
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="supplyStatus">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div class="slotBox-item" v-for="(item, idx) in row.foodProductMatchingList" :key="idx" :class="{
                    noBorderB: idx + 1 == row.foodProductMatchingList.length,
                  }">
                    {{ item.supplyStatus == 0 ? "未供应" : "供应" }}
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="packagingPrice">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div class="slotBox-item" v-for="(item, idx) in row.foodProductMatchingList" :key="idx" :class="{
                    noBorderB: idx + 1 == row.foodProductMatchingList.length,
                  }">
                    <div v-if="item.packagingPrice">
                      {{ item.packagingPrice ? item.packagingPrice : 0 }}元/{{
                        item.specification ? item.specification : "公斤"
                      }}
                    </div>
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="priority">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div class="slotBox-item" v-for="(item, idx) in row.foodProductMatchingList" :key="idx" :class="{
                    noBorderB: idx + 1 == row.foodProductMatchingList.length,
                  }">
                    <div v-if="item.priority == 0">
                      <Checkbox v-model="item.priority" :true-value="1" :false-value="0" @on-change="(value) => {
                          changePriority(item);
                        }
                        ">优先</Checkbox>
                    </div>
                    <div v-else style="
                        color: green;
                        padding-right: 6px;
                        display: flex;
                        align-items: center;
                      " @click=" changePriority(item)">
                      <Icon type="md-checkbox" color="green" size="20" style="margin-right: 2px" />优先
                    </div>
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="operation">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div class="slotBox-item" v-for="(item, idx) in row.foodProductMatchingList" :key="idx" :class="{
                    noBorderB: idx + 1 == row.foodProductMatchingList.length,
                  }">
                    <Poptip confirm transfer placement="left" :title="`是否确认取消匹配？`" @on-ok="cancelBind(item)">
                      <div style="color: orange; cursor: pointer">取消匹配</div>
                    </Poptip>
                  </div>
                </div>
              </template>
            </Table>
            <div style="width: 100%; text-align: right">
              <cus-page :data="pages" class="mt_10" @pageChange="selectMealFoodOrPurchaseFoodMatchingApi()"
                :showSizer="false" :showElevator="false"></cus-page>
            </div>
          </div>
        </div>
        <div class="contentBox-center" v-if="step == 2">
          <div>
            <div style="text-align: center; margin-bottom: 5px">
              食谱原料名称
            </div>
            <div class="chooseItem">
              {{ selectItem ? selectItem.materialName : "" }}
            </div>
            <div style="
                text-align: center;
                transform: rotate(90deg);
                padding: 10px 0;
              ">
              <Icon type="md-infinite" size="20" />
            </div>
            <div class="chooseItem">
              {{ selectRightItem ? selectRightItem.materialName : "" }}
            </div>
            <div style="text-align: center; margin-top: 5px">商品名</div>
            <div style="margin-top: 20px; text-align: center">
              <Checkbox v-model="single">是否首选</Checkbox>
            </div>
            <div style="margin-top: 20px; text-align: center">
              <Button type="primary" @click="goCheck()">匹配确认</Button>
            </div>
          </div>
        </div>
        <div class="contentBox-right" v-if="step == 2">
          <div style="width: 310px">
            <Form ref="formValidate" :model="form">
              <FormItem label="" prop="materialName" :label-width="0">
                <Input v-model="form.materialName" maxlength="20" clearable placeholder="请输入商品名" style="width: 200px">
                </Input>
              </FormItem>
              <Button class="mr_20" type="primary" @click="
                pages2.page = 1;
              selectProductMaterialListApi();
              ">查询</Button>
            </Form>
          </div>
          <div>
            <Table border :loading="loading2" :columns="columns2" :data="data2" height="500">
              <template slot-scope="{ row }" slot="materialName">
                <div class="namebox" @click="selectRightItem = row" :class="selectRightItem &&
                    selectRightItem.materialId == row.materialId
                    ? 'selecteft'
                    : ''
                  ">
                  {{ row.materialName }}
                </div>
              </template>
              <template slot-scope="{ row }" slot="isCommonly">
                <div v-if="row.isCommonly == 1">
                  <Icon type="md-checkbox" color="green" size="20" style="margin-right: 2px" />供应
                </div>
                <div v-else>
                  <Icon type="md-checkbox" color="gray" size="20" style="margin-right: 2px" />未供应
                </div>
              </template>
            </Table>
            <div style="width: 100%; text-align: right">
              <cus-page :data="pages2" class="mt_10" @pageChange="selectProductMaterialListApi()" :showSizer="false"
                :showElevator="false"></cus-page>
            </div>
          </div>
        </div>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  selectMealFoodOrPurchaseFoodMatching,
  selectProductMaterialList,
  saveFoodProductMatching,
  deleteFoodProductMatchingPriority,
  updateFoodProductMatchingPriority,
} from "@/api/organ/dishesModule";

const form = {
  type: 0, // 匹配类型
  mealMaterialName: "", // 食谱原料名
  materialName: "", // 商品名称
  kitchenArea: "", //区域代码
};

export default {
  data() {
    return {
      form: form,
      ruleValidate: {},
      loading: false,
      loading2: false,
      materialTypeList: [],
      areaList: this.$store.state.selectList.areaList, //区域
      specificationList: [],
      foodRuleTypeList: [],
      columns: [
        {
          title: "食谱原料名称",
          slot: "materialName",
          align: "center",
        },
        {
          title: "商品名",
          slot: "productName",
          width: 180,
          align: "center",
        },
        {
          title: "供应状态",
          slot: "supplyStatus",
          align: "center",
        },
        {
          title: "价格",
          slot: "packagingPrice",
          align: "center",
        },
        {
          title: "优先匹配",
          slot: "priority",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      columns2: [
        {
          title: "商品名称",
          slot: "materialName",
          align: "center",
          width: 180,
        },
        {
          title: "是否供应",
          slot: "isCommonly",
          align: "center",
          width: 160,
        },
      ],
      data: [],
      data2: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      pages2: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      selectItem: null,
      selectRightItem: null,
      step: 1,
      single: false,
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = this.$cu.deepClone(form);
        this.selectItem = null;
        this.selectRightItem = null;
        this.step = 1;
        this.single = false;
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.form.kitchenArea = this.areaList[0].kitchenArea
      this.selectMealFoodOrPurchaseFoodMatchingApi();
    },
    onOk() {
      if (this.step == 1) {
        this.step = 2;
      }
      this.selectProductMaterialListApi();
    },
    changekitchenArea() {   
   
      if(this.$refs["modal"].show) {
        this.form.mealMaterialName = ''
      this.form.type = 0
      this.pages.page = 1
      this.selectMealFoodOrPurchaseFoodMatchingApi();
      }
    
    },
    // 计量单位变更
    changeSpecification(value) {
      console.log("value---" + value);
      if (value == 0) {
        this.form.unitWeight = 1;
      }
      if (value == 1) {
        this.form.unitWeight = 0.5;
      }
    },
    // changePriority(item) {
    //   this.$cu.debounce(() =>{
    //     this.changePriorityApi(item)
    //   },1000)
    // },
    // 左侧选中
    selectLeftBtn(row) {
      this.selectItem = row;
      this.form.materialName = row.materialName;
      this.pages2.page = 1;
      this.selectRightItem = null;
      this.selectProductMaterialListApi();
    },
    // 待绑定食材列表
    selectMealFoodOrPurchaseFoodMatchingApi() {
      this.loading = true;
      return new Promise((resolve) => {
        selectMealFoodOrPurchaseFoodMatching({
          type: this.form.type,
          kitchenArea: this.form.kitchenArea,
          mealMaterialName: this.form.mealMaterialName,
          current: this.pages.page,
          size: this.pages.pageSize,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.list;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 商品列表
    selectProductMaterialListApi() {
      this.selectRightItem = null;
      this.loading2 = true;
      return new Promise((resolve) => {
        selectProductMaterialList({
          materialName: this.form.materialName,
          kitchenArea: this.form.kitchenArea,
          current: this.pages2.page,
          size: this.pages2.pageSize,
        }).then((res) => {
          this.loading2 = false;
          if (res.code === 1) {
            this.data2 = res.data.list;
            this.pages2.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 匹配确认
    goCheck() {
      if (!this.selectItem) {
        this.$Message.warning("请先选择您要匹配的食谱原料");
        return;
      }
      if (!this.selectRightItem) {
        this.$Message.warning("请先选择您要匹配的商品");
        return;
      }
      this.saveFoodProductMatchingApi();
    },
    // 绑定
    saveFoodProductMatchingApi() {
      this.loading = true;
      return new Promise((resolve) => {
        saveFoodProductMatching({
          foodProductMatchingId: this.selectItem.foodProductMatchingId,
          mealMaterialId: this.selectItem.materialId,
          mealMaterialName: this.selectItem.materialName,
          kitchenArea: this.form.kitchenArea,
          priority: this.single ? 1 : 0,
          productMaterialId: this.selectRightItem.materialId,
          productMaterialName: this.selectRightItem.materialName,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.$Message.success("匹配成功.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            this.selectProductMaterialListApi();
            resolve();
          }
        });
      });
    },
    // 取消匹配
    cancelBind(item) {
      this.loading = true;
      return new Promise((resolve) => {
        deleteFoodProductMatchingPriority({
          foodProductMatchingId: item.foodProductMatchingId,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.$Message.success("已取消匹配.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            resolve();
          }
        });
      });
    },
    // 更改优先级
    changePriority(item) {
      this.loading = true;
      return new Promise((resolve) => {
        updateFoodProductMatchingPriority({
          mealMaterialId: item.mealMaterialId,
          foodProductMatchingId: item.foodProductMatchingId,
          supplyStatus: item.supplyStatus,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.$Message.success("匹配优先级更换成功.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            resolve();
          } else {
            item.priority = 0;
          }
        });
      });
    },
  },
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
  /* height: 40px !important; */
  height: auto !important;
  line-height: 32px !important;
}

/deep/.ivu-select-selection {
  height: auto !important;
  min-height: 32px !important;
  border-radius: 2px !important;
}

/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/deep/.ivu-table td {
  position: relative !important;
}
</style>

<style scoped lang="less">
.location {
  position: absolute;
  top: 7px;
  left: 280px;
}
.contentBox {
  display: flex;
  justify-content: space-between;

  &-left {
    // width: 586px;
  }

  &-center {
    display: flex;
    align-items: center;
    padding: 0 40px;
  }
}

.slotBox {
  width: 100%;

  // padding: 5px 0;
  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #e3e8ee;
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.noBorderB {
  border-bottom: none !important;
}

.namebox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid white;
  cursor: pointer;
}

.selecteft {
  color: #1890ff;
  background: #e5f6ff;
  border-left: 2px solid #1890ff;
}

.chooseItem {
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid #e3e8ee;
  border-radius: 3px;
  background: white;
  text-align: center;
  word-break: break-all;
  font-size: 12px;
  width: 120px;
  min-height: 32px;
}
</style>
